import React, { Component } from 'react';
import styles from './index.less';

class ViewTools extends Component {
  handleOpen = () => {
    this.file.click();
  };

  render() {
    const { onZoomOut, onZoomIn } = this.props;
    return (
      <div className={styles.editingTools}>
        <ul className={styles.controlList}>
          {/* <li className={`${styles.control} ${styles.line}`}> */}
          {/* <input
                            ref={file => {this.file = file;}}
                            className={styles.openFile}
                            type="file"
                            onChange={onOpenFIle}
                        />
                        <button type="button" title="打开BPMN文件" onClick={this.handleOpen}>
                            <i className={styles.open}/> 打开
                        </button>
                    </li>

                    <li className={styles.control}>
                        <button type="button" title="撤销" onClick={onUndo}>
                            <i className={styles.undo} /> 撤销
                        </button>
                    </li>
                    <li className={`${styles.control} ${styles.line}`}>
                        <button type="button" title="恢复" onClick={onRedo}>
                            <i className={styles.redo} /> 恢复
                        </button>
                    </li>

                    <li className={styles.control}>
                        <button type="button" title="重置大小" onClick={onZoomReset}>
                            <i className={styles.zoom} /> 重置
                        </button>
                    </li> */}
          <li className={styles.control}>
            <button type='button' title='放大' onClick={onZoomIn}>
              <i className={styles.zoomIn} /> 放大
            </button>
          </li>
          <li className={`${styles.control} ${styles.line}`}>
            <button type='button' title='缩小' onClick={onZoomOut}>
              <i className={styles.zoomOut} /> 缩小
            </button>
          </li>
          {/* <li className={styles.control}>
                        <button type="button" title="下载BPMN文件" onClick={onDownloadXml}>
                            <i className={styles.download} /> 下载文件
                        </button>
                    </li> */}
          {/* <li className={`${styles.control} ${styles.line}`}>
                        <button type="button" title="下载流程图片" onClick={onDownloadSvg}>
                            <i className={styles.image} /> 下载图片
                        </button>
                    </li> */}
          {/* <li className={styles.control}>
                        <button type="button" title="保存" onClick={onSave}>
                            保存
                        </button>
                    </li> */}
          {/* <li className={styles.control}>
                        <button type="button" title="预览流程图片" onClick={onPreview}>
                            <i className={styles.preview} /> 预览
                        </button>
                    </li> */}
        </ul>
      </div>
    );
  }
}

export default ViewTools;
